<template>
  <div class="wrapper">
    <div class="title-wrapper">
      <div class="bigTitle">销售日动态</div>
      <div style="text-align: right">
        <el-date-picker
            style="width: 40%"
            v-model="currentTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleChange"
        />
        <el-radio-group size="mini" v-model="seriesName" style="margin-left: 10px" @change="handleRadio">
          <el-radio-button label="订单" />
          <el-radio-button label="欠款" />
          <el-radio-button label="金额" />
          <el-radio-button label="利润" />
        </el-radio-group>
      </div>
    </div>
    <div class="total_wrapper">
      <div class="item">合计: {{totalNumber}}单</div>
      <!-- <div class="item"  v-for="item in departmentOptions" :key="item.label">{{ item.label }}:{{item.value}}</div> -->
    </div>
    <salesmann-bar :seriesName="seriesName" :source="manData"/>
  </div>
</template>

<script>
import {sumServiceMan} from "@/api/services/dashboard.service";
import salesmannBar from './salesmann-bar'
import {getTabTime} from "./utils";

let state = {
  '订单': 0,
  '金额': 1,
  '欠款': 2,
  '利润': 3,
}
export default {
  name: "salesmanBar",
  components: {salesmannBar},
  data() {
    return {
      manData: {},
      seriesName: '订单',
      departmentOptions: [],
      totalNumber:0,
      currentTime: '',
      params: {
        countType: 0, // 订单量【0】总价【1】2【欠款】
        stime: '',
        etime: ''
      }
    }
  },
  created() {
    const {startTime, endTime} = getTabTime('今天')
    this.currentTime = [startTime, endTime]
    this.params.stime = startTime
    this.params.etime = endTime
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleRadio(data) {
      this.seriesName = data
      this.params.countType = state[data]
      this.getData()
    },
    handleChange(data) {
      if (!data) return
      this.params.stime = data[0]
      this.params.etime = data[1]
      this.getData()
    },
    getData() {
      sumServiceMan(this.params).then(res => {
        if (!res.data || res.data.length === 0) {
          return
        }

        // 移除最后一个
        // let lastData = res.data.pop()
        // let noResult = lastData.roleResult
        // let departmentOptions = []
        // let sum = 0
        // for (let attr in noResult) {
        //   if(attr !== '其他角色') {
        //     departmentOptions.push({
        //       label: attr, value: noResult[attr]
        //     })
        //     sum += Number(noResult[attr])
        //   }
        // }
        // this.totalNumber = sum
        // this.departmentOptions = departmentOptions

        let departmentOptions = [];
        let sum = 0;
        let list = res?.data || [];
        list.forEach(it => {
          departmentOptions.push({ label: it.serviceMan, value: it.result });
          sum += Number(it.result);
        });
        this.totalNumber = sum.toFixed(0);
        this.departmentOptions = departmentOptions;

        let params = {
          xAxis: [],
          series: []
        }
        res.data.slice(0,15).forEach(item => {
          params.xAxis.push(item.serviceMan)
          params.series.push(item.result)

        })
        this.manData = params
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title-wrapper {
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;

  .bigTitle {
    border-bottom: none;
    padding: 8px 0;
    color: #3A71A8;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
  }
}

.total_wrapper {
  width: 80%;
  display: flex;
  margin: 0 auto;
  font-size: 15px;
  text-align: center;
  .item {
    flex: 1;
  }
}

.wrapper {
  width: 100%;
  height: 300px;
}
</style>
